<template>
  <view style="position: relative">
    <view class="navbar">
      <view class="title">数据分析</view>
      <view class="searchs-box">
        <view class="search-item search-title-box">
          <uni-data-select ref="selectOneRef" :clear="false" v-model="custypeId"
            :localdata="customerDatas"></uni-data-select>
        </view>
        <view @click="showPopClick" class="search-item">
          <text>更多查询</text>
          <image src="@/static/images/common/more-fliter.png"
            style="width: 20px; height: 20px; position: relative; top: 10rpx" />
        </view>
      </view>
    </view>
    <view v-if="hasNoPermission" class="auth_mess">暂无权限</view>
    <view class="content" v-else>
      <view class="column-chart">
        <view class="chart-box">
          <view class="title">产品类别</view>
          <view class="chats-cont">
            <RingCharts :chartOptions="pieOpts" :chartData="ringDatas" canvasId="proRingChart" />
          </view>
          <view class="chats-cont">
            <view class="legend" v-if="productCatage">
              <view>销售价格</view>
            </view>
            <Charts canvasId="proChart" :chartOptions="mixOpts" :chartData="productMixDatas"></Charts>
          </view>
        </view>
      </view>

      <view class="column-chart">
        <view class="chart-box">
          <view class="title">购销属性</view>
          <view class="chats-cont">
            <RingCharts :chartOptions="pieOpts" :chartData="ringBsAttritDatas" canvasId="attriRingChart" />
          </view>
          <view class="chats-cont">
            <view class="legend" v-if="attriCatage">
              <view>销售价格</view>
            </view>
            <Charts canvasId="attriChart" :chartOptions="mixOpts" :chartData="bsAttritMixDatas"></Charts>
          </view>
        </view>
      </view>

      <view class="column-chart">
        <view class="chart-box">
          <view class="title">购方类别</view>

          <view class="chats-cont">
            <RingCharts :chartOptions="pieOpts" :chartData="ringBuyerDatas" canvasId="buyerRingChart" />
          </view>
          <view class="chats-cont">
            <view class="legend" v-if="bugerCatage">
              <view>销售价格</view>
            </view>
            <Charts canvasId="buyerChart" :chartOptions="mixOpts" :chartData="buyerMixDatas"></Charts>
          </view>
        </view>
      </view>

      <view class="column-chart">
        <view class="chart-box">
          <view class="title">就地转化占比</view>
          <view class="chats-cont">
            <RingCharts :chartOptions="pieOpts" :chartData="ringConveDatas" canvasId="converRingChart" />
          </view>
          <view class="chats-cont">
            <view class="legend" v-if="convertCatage">
              <view>销售价格</view>
            </view>
            <Charts canvasId="converChart" :chartOptions="mixOpts" :chartData="convertMixDatas"></Charts>

          </view>
        </view>
      </view>

      <view class="column-chart">
        <view class="chart-box">
          <view class="title">流向类别</view>
          <view class="chats-cont">
            <Charts canvasId="flowdChart" :chartOptions="mixFlowOpts" :chartData="flowMixDatas" type="column"></Charts>
          </view>
        </view>
      </view>
    </view>
    <more-search ref="moreSearchRef" :show="popShow" :dateType="dateType" :customerType="custypeId"
      :list="customerDatas" @filterChange="sureClick" @closePop="popShow = false"></more-search>

    <u-back-top :scroll-top="scrollTop" :top="top" mode="square" :iconStyle="iconStyle"></u-back-top>
  </view>
</template>

<script>
  import {
    getByTicketCode,
    exportPdfData,
    getCustomerProvinceChart,
    getCustomerAttributeChart,
    getMonthShippingSalesPlan,
    getDistrictPlan,
    getYearShippingSalesPlan,
  } from "@/api/cockpit/cockpit";
  import { getAnalysisChart, queryDictData, listCoalInfo } from "@/api/statics.js";
  import config from "@/config";
  import { colorList, pieChartDataImport, columnChartDataImport, sortPieObjs, sortColumnObjs, dictsObjs } from "./baseData.js";
  import { getMennus } from "@/api/home";
  import { getLast30day, getDays } from "@/utils/formatTime";
  import Charts from "./charts.vue";
  import RingCharts from './ringCharts.vue'
  import constant from '@/utils/constant';
  import storage from '@/utils/storage';
  export default {
    components: { Charts, RingCharts },
    data() {
      return {
        stateList: [],
        hasNoPermission: false,
        custypeId: "100",
        chartData: {},
        chartOptions: {},
        showTooltip: false,
        tooltipData: {
          title: "",
          items: [],
        },
        tooltipPosition: {
          left: "0px",
          top: "0px",
        },
        popShowSearch: false,
        productCatage: false,
        attriCatage: false,
        bugerCatage: false,
        convertCatage: false,
        dateType: 0,
        queryParams: {
          customerIds: undefined,
          customerType: "100",
          dateType: 0,
          endTime: undefined,
          beginTime: undefined,
        },
        productsObj: {},
        customerDatas: [],
        productLists: [
          {
            text: "全部",
            value: 2,
          },
          {
            text: "煤矿",
            value: 0,
          },
          {
            text: "非煤矿",
            value: 1,
          },
        ],
        popShow: false,
        mixMaxUnit: 100,
        customTooltip: {
          show: false,
          left: 0,
          top: 0,
          content: "",
        },
        // 返回顶部组件参数
        scrollTop: 0,
        top: "600",
        iconStyle: {
          fontSize: "32rpx",
          color: "#2979ff",
        },
        mixFlowOpts: {
          enableScroll: true,
          dataPointShape: true,
          dataPointShapeType: "solid",
          color: colorList,
          padding: [0, 15, 20, 15],
          legend: {
            show: true, // 必须开启图例总开关
            position: "top",
            float: "top",
            padding: 26,
            fontSize: 12,
          },
          xAxis: {
            scrollShow: false,
            axisLine: true,
            itemCount: 4, // 初始可见6个数据点
            axisLineColor: "#D9D9D9",
            rotateLabel: true,
            rotateAngle: 20,
            marginTop: 8,
          },
          yAxis: {
            axisLine: true,
            splitNumber: 5,
            gridType: "solid",
            showTitle: true,
            type: "categories",
            data: [
              {
                position: "left",
                titleOffsetY: -10,
                title: "单位：万吨",
                textAlign: "left",
                axisLine: false, // 不显示轴线
              },
            ],
          },
          extra: {
            mix: {
              column: {
                width: 8,
                label: {
                  show: false, // 隐藏所有折线图的数据标签
                },
              },
              zoom: {
                show: true,
                maxScale: 3, // 最大放大倍数
                minScale: 0.5, // 最小缩小倍数
              },
              // scrollBar: {
              //   show: true,
              //   height: 6,
              //   bgColor: '#EEEEEE',
              //   barColor: '#999999'
              // }
            },
            tooltip: {
              showBox: false,
              custom: true,
              trigger: "item", // 设置为item表示鼠标滑过触发
              showAlways: false, // 不要一直显示
            },
            line: {
              type: "straight",
              activeType: "hollow",
              width: 20,
              linearType: "custom",
              label: {
                show: false, // 隐藏所有折线图的数据标签
              },
            },
          },
        },
        mixOpts: {
          enableScroll: true,
          scrollPosition: 'end',
          dataPointShape: true,
          dataPointShapeType: "solid",
          color: colorList,
          padding: [20, 15, 20, 15],
          legend: {
            show: false, // 必须开启图例总开关
            position: "top",
            float: "top",
            padding: 10,
            data: ["销售价格"],
          },

          xAxis: {
            scrollShow: false,
            scrollAlign: "left",
            axisLine: true,
            itemCount: 4, // 初始可见6个数据点
            axisLineColor: "#D9D9D9",
            rotateLabel: true,
            rotateAngle: 20,
            marginTop: 8,
          },

          yAxis: {
            axisLine: true,
            splitNumber: 5,
            gridType: "solid",
            showTitle: true,
            type: "categories",
            data: [
              {
                position: "right",
                title: "单位：元/吨",
                titleOffsetY: -10,
                axisLine: false, // 不显示轴线
              },
              {
                position: "left",
                titleOffsetY: -10,
                title: "单位：万吨",
                textAlign: "left",
                axisLine: false, // 不显示轴线
              },
            ],
          },
          extra: {
            mix: {
              column: {
                width: 8,
                label: {
                  show: false, // 隐藏所有折线图的数据标签
                },
              },
              zoom: {
                show: true,
                startValue: 24,
                endValue: 30,
                maxScale: 3, // 最大放大倍数
                minScale: 0.5, // 最小缩小倍数
              },
              // scrollBar: {
              //   show: true,
              //   height: 6,
              //   bgColor: '#EEEEEE',
              //   barColor: '#999999'
              // }
            },
            tooltip: {
              showBox: false,
              custom: true,
              trigger: "item", // 设置为item表示鼠标滑过触发
              showAlways: false, // 不要一直显示
            },
            line: {
              type: "straight",
              activeType: "hollow",
              width: 20,
              linearType: "custom",
              label: {
                show: false, // 隐藏所有折线图的数据标签
              },
            },
          },
        },
        pieOpts: {
          rotate: false,
          rotateLock: false,
          color: colorList,
          padding: [5, 5, 5, 5],
          dataLabel: false,
          enableScroll: false,
          legend: {
            show: true,
            position: "left",
            lineHeight: 25,
          },
          title: {
            name: "",
            fontSize: 15,
            color: "#666666",
          },
          subtitle: {
            name: "",
            fontSize: 25,
            color: "#7cb5ec",
          },
          extra: {
            tooltip: {
              showBox: false,
              custom: true,
              trigger: "item", // 设置为item表示鼠标滑过触发
              showAlways: false, // 不要一直显示
            },
            ring: {
              ringWidth: 30,
              customRadius: 90,
              activeOpacity: 0.5,
              activeRadius: 10,
              offsetAngle: 0,
              labelWidth: 0,
              border: true,
              borderWidth: 1,
              borderColor: "#FFFFFF",
            },
          },
        },
        isCity: 0, //市内
        offTown: 0, //市外
        isCityPercentage: 0, //市内进度
        offTownPercentage: 0, //市外进度
        planTotal: 0, //计划总量
        completedTotal: 0, //完成量
        detail: {},
        chartData: {},
        //您可以通过修改 config-ucharts.js 文件中下标为 ['arcbar'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
        ringDatas: {
          series: [
            {
              data: [],
            },
          ],
        },
        ringBsAttritDatas: {
          series: [
            {
              data: [],
            },
          ],
        },

        ringBuyerDatas: {
          series: [
            {
              data: [],
            },
          ],
        },
        ringConveDatas: {
          series: [
            {
              data: [],
            },
          ],
        },
        productMixDatas: {},
        bsAttritMixDatas: {},
        buyerMixDatas: {},
        convertMixDatas: {},
        flowMixDatas: {},
        abroadDatas: [],
        resAttriDatas: {},
        buyerDatas: {},
        converDatas: { 1: "就地转化", 2: "非就地转化" },
      };
    },
    onShow() {
      this.scrollTop = 0;
      this.popShow = false;
      const userInfo = storage.get(constant.SYS_CONSIGNOR)
      if (userInfo.sysUser?.userId != 1) {
        this.getMenus()
      }
    },
    onLoad(option) { },
    onPullDownRefresh() {
      this.getChartsDatas(this.queryParams);
      uni.stopPullDownRefresh();
    },
    onPageScroll(e) {
      this.scrollTop = e.scrollTop;
      uni.hideLoading()
    },
    computed: {},
    created() {
      this.getDictDatas();
    },
    watch: {
      custypeId: {
        handler(newVal, oldVal) {
          this.queryParams.customerType = newVal
          this.setChartsEmpty();
          if (!!newVal) {
            this.$refs.moreSearchRef.resetForm(newVal);
          }
          this.defaultDate("reset");
        }
      },
    },
    methods: {
      async getMenus() {
        let res = await getMennus()
        if (res.code == 200) {
          this.hasNoPermission = res.permissions.includes('app:system:analysis') ? false : true
        }
      },
      setChartsEmpty() {
        this.productCatage = false
        this.attriCatage = false
        this.bugerCatage = false
        this.convertCatage = false
        this.ringDatas.series[0].data = [
          {
            name: "暂无数据",
            value: 0,
          },
        ];
        this.productMixDatas = {};
        this.ringBsAttritDatas.series[0].data = [
          {
            name: "暂无数据",
            value: 0,
          },
        ];
        this.bsAttritMixDatas = {};
        this.ringBuyerDatas.series[0].data = [
          {
            name: "暂无数据",
            value: 0,
          },
        ];
        this.buyerMixDatas = {};
        this.ringConveDatas.series[0].data = [
          {
            name: "暂无数据",
            value: 0,
          },
        ];
        this.convertMixDatas = {};
      },
      async getDictDatas() {
        let that = this;
        let res = await queryDictData({ dictType: "customer_type" });
        if (res.code == 200) {
          res.data.forEach((e) => {
            if (e.dictValue != 4) {
              that.customerDatas.push({
                value: e.dictValue,
                text: e.dictLabel,
              });
            }
            that.buyerDatas[e.dictValue] = e.dictLabel;
          });
        }

        let coalRes = await listCoalInfo();
        if (coalRes.code == 200) {
          coalRes.rows.forEach((item) => {
            that.productsObj[item.coalNum] = item.coalName;
          });
        }
        let resAttri = await queryDictData({ dictType: "buy_sell_attribute" });
        if (resAttri.code == 200) {
          resAttri.data.forEach((e) => {
            if (e.dictValue != 4) {
              that.resAttriDatas[e.dictValue] = e.dictLabel;
            }
          });
        }
        let abRes = await queryDictData({ dictType: "abroad" });
        try {
          if (abRes.code == 200) {
            abRes.data.forEach((e) => {
              that.abroadDatas.push({
                value: e.dictValue,
                text: e.dictLabel,
              });
            });
          }
        } catch (e) { }
        this.defaultDate("reset");
      },
      defaultDate(type = "1") {
        let sDate = getLast30day(30);
        let eDate = getDays();
        this.queryParams.beginTime = sDate;
        this.queryParams.endTime = eDate;
        if (type == "reset") {
          this.getChartsDatas(this.queryParams);
        }
      },
      sureClick(data) {
        this.queryParams = { ...this.queryParams, ...data, ...{ customerType: this.custypeId } }
        this.getChartsDatas(this.queryParams);
      },
      showPopClick() {
        this.popShow = true;
      },
      getDates() {
        const today = new Date();
        const dates = [];
        for (let i = 0; i < 5; i++) {
          const date = new Date(today);
          date.setDate(today.getDate() - i);

          // 格式化日期为YYYY-MM-DD
          const year = date.getFullYear();
          const month = String(date.getMonth() + 1).padStart(2, '0');
          const day = String(date.getDate()).padStart(2, '0');
          const formattedDate = `${year}-${month}-${day}`;
          dates.push(formattedDate);
        }
        return dates.reverse()
      },

      setNullDatas(type, name) {
        let chartDatas = null
        if (type == 'pie') {
          chartDatas = pieChartDataImport[name]
        } else {
          chartDatas = columnChartDataImport[name]
        }
        return chartDatas
      },
      sortNames(type, name, datas) {
        let mapData = []
        let A1 = sortPieObjs[this.custypeId == "100" ? 'coal' : 'noCoal'][name]

        if (type == 'pie') {
          // 按照A1的顺序排序
          datas.forEach((item) => {
            mapData[A1.indexOf(item.name)] = {
              name: this.custypeId == "100" ? dictsObjs[name][item.name] : item.name,
              value: item.value
            }
          });
          return mapData;
        } else {
          if (name == 'abroadType') {
            let seriesDataBroad = []
            if (this.queryParams.customerType == "100") {
              datas.forEach((item, index) => {
                seriesDataBroad[0].data.push(item.abroadDetailVos[0].smiAbroad);
                seriesDataBroad[1].data.push(item.abroadDetailVos[1].yliAbroad);
                seriesDataBroad[2].data.push(item.abroadDetailVos[2].sxiAbroad);
                seriesDataBroad[3].data.push(item.abroadDetailVos[3].sxoAbroad);
              });
            } else {
              let objs = datas.columnChartMap;
              seriesDataBroad[0].data = objs["神木市内销量"];
              seriesDataBroad[1].data = objs["榆林市内销量"];
              seriesDataBroad[2].data = objs["陕西省内销量"];
              seriesDataBroad[3].data = objs["省外销量"];
            }
            return seriesDataBroad;
          } else {
            console.log("SSSSSSSSSS柱子的排序标准A1", A1)
            datas.forEach((item) => {
              if (A1.indexOf(item.type) != -1) {
                mapData[A1.indexOf(item.type)] = item
              } else { }

            });

            let linesDatasB = []
            //销售价格
            if (this.custypeId == "100") {
              // 步骤2：初始化累加数组（长度与deta一致，初始值0） 
              const sumArr = new Array(datas[0].detailsVos.length).fill(0);
              const volumnArr = new Array(datas[0].detailsVos.length).fill(0);
              // 步骤3：遍历abc和deta，按索引累加price 
              datas.forEach(obj => {
                const deta = obj.detailsVos;
                deta.forEach((item, index) => {
                  sumArr[index] += item.totalPrice;
                  volumnArr[index] += item.saleVolume;
                });
              });
              linesDatasB = sumArr.map((item, index) => {
                return (item == 0 || volumnArr[index] == 0) ? 0 : (Math.round((item / volumnArr[index]) * 100)) / 100
              })
            } else {
              linesDatasB = datas['salePrice']
            }
            console.log("SSSSSSSSSS价格数组", linesDatasB)
            let seriesDataB = mapData.map(
              (item, index) => {
                return {
                  name: this.custypeId == "100" ? dictsObjs[name][item.type] : item.type,
                  index: index,
                  type: "column",
                  textOffset: "10000",
                  showName: false, // 不显示系列名称
                  label: {
                    show: false, // 不显示数据点标签
                  },
                  showLegend: false, // 显示图例
                  data: item.detailsVos.map((kk) => kk.saleVolume),
                };
              }
            );

            let seriesDataLineB = {
              name: "销售价格",
              type: "line",
              addPoint: true,
              showName: false,
              label: {
                show: false,
              },
              showLegend: true,
              color: "#D22C2C",
              textSize: "30",
              textOffset: "10000",
              legendShape: "circle",
              data: linesDatasB,
            };
            seriesDataB.push(seriesDataLineB);
            console.log("SSSSSSSSSS绘制柱子的series================", seriesDataB)
            console.log("？？？？？？？？？？？？？？？？？？？？？？？？？？？")
            return seriesDataB;
          }
        }
      },
      pieDatasCom(name, datas) {

        switch (name) {
          case 'productInfo':
            this.ringDatas.series[0].data =
              datas.map((item) => {
                return {
                  name: item.name,
                  value: item.value,
                };
              });
            break;
          case 'bsAttribute':
            this.ringBsAttritDatas.series[0].data =
              datas.map((item) => {
                return {
                  name: item.name,
                  value: item.value,
                };
              });
            break;
          case 'buyerInfo':
            this.ringBuyerDatas.series[0].data =
              datas.map((item) => {
                return {
                  name: item.name,
                  value: item.value,
                };
              });
            break;
          case 'locallyConvert':
            this.ringConveDatas.series[0].data =
              datas.map((item) => {
                return {
                  name: item.name,
                  value: item.value,
                };
              });
            break;
          default:
            break;
        }
      },
      columnDatasCom(name, seriesData, categoriesData) {
        switch (name) {
          case 'productInfo':
            this.productMixDatas = {
              categories: categoriesData,
              series: seriesData,
            };
            break;
          case 'bsAttribute':
            this.bsAttritMixDatas = {
              categories: categoriesData,
              series: seriesData,
            };
            break;
          case 'buyerInfo':
            this.buyerMixDatas = {
              categories: categoriesData,
              series: seriesData,
            };
            break;
          case 'locallyConvert':
            this.convertMixDatas = {
              categories: categoriesData,
              series: seriesData,
            };
            break;
          default:
            this.flowMixDatas = {
              categories: categoriesData,
              series: seriesData,
            };
            break;
        }
      },
      comDatas(type, name, datas, categories = []) {
        if (type == 'pie') {
          let tempData = [], finalDatas = []
          if (datas.length == 0) {
            finalDatas = this.setNullDatas(type, name)
          } else {
            tempData = datas
            finalDatas = this.sortNames(type, name, tempData)
          }

          this.pieDatasCom(name, finalDatas)
        } else {
          console.log("SSSSSSSSSS柱子的数据排序前seriesData", datas)
          let finalDatas = this.sortNames(type, name, datas)
          this.columnDatasCom(name, finalDatas, categories)
        }
      },
      getAllComData(name, datas) {
        console.log("=========SSSSSSSSSS柱子的name================", name)
        //柱状图
        let B = datas[name].columnChartData
        let categories = [], seriesData = []

        if (this.queryParams.customerType == "100") {
          //煤矿
          if (B.length == 0) {
            let zeroData = this.setNullDatas('column', name)
            categories = this.getDates()
            console.log("SSSSSSSSSS柱子直接添加0后zeroData================", zeroData)
            console.log("SSSSSSSSSS柱子直接添加0后categories================", categories)
            this.columnDatasCom(name, zeroData, categories)
            return
          } else {
            categories = B[0].detailsVos.map(item => item.statisticsDate)
            seriesData = B
          }
        } else {
          //非煤
          categories = B.date
          seriesData = B.columnChartMap
        }
        let finalDatas = this.sortNames('column', name, seriesData)
        console.log("SSSSSSSSSSSSSSSSSSScategories================", categories)
        this.columnDatasCom(name, finalDatas, categories)
      },
      async getChartsDatas(data) {
        console.log("SSSSSSSSSSSjiekou入参====", data)
        let res = await getAnalysisChart(data);
        console.log("SSSSSSSSSSSjiekoufanhui====", res)
        if (res.code == 200) {
          this.comDatas('pie', 'productInfo', res.data.productInfo.pieChartData)
          this.comDatas('pie', 'bsAttribute', res.data.bsAttribute.pieChartData)
          this.comDatas('pie', 'buyerInfo', res.data.buyerInfo.pieChartData)
          this.comDatas('pie', 'locallyConvert', res.data.locallyConvert.pieChartData)

          this.getAllComData('productInfo', res.data)
          this.getAllComData('bsAttribute', res.data)
          this.getAllComData('buyerInfo', res.data)
          this.getAllComData('locallyConvert', res.data)
          this.getAllComData('abroadType', res.data)
        }
      },
      chartComplete(chart) {
        // 获取图例组件
        const legendComponent = chart.getComponent("legend");
        if (legendComponent) {
          // 监听图例点击事件
          chart.on("legendselectchanged", (params) => {
            const selected = params.selected;
            console.log("图例选中", selected);
            const series = chart.getOption().series;
            // 遍历图例选择状态
            for (const name in selected) {
              const isSelected = selected[name];
              console.log(`图例 ${name} 被${isSelected ? "选中" : "取消选中"}`);

              // 自定义处理逻辑
              this.handleLegendClick(name, isSelected, series);
            }
          });
        }
      },
      handleLegendClick(name, isSelected, series) {
        // 这里可以添加你的自定义逻辑
        uni.showToast({
          title: `点击了 ${name}，状态: ${isSelected ? "显示" : "隐藏"}`,
          icon: "none",
        });

        // 示例：根据图例点击动态更新其他数据
        if (name === "销售额") {
          // 当销售额图例被点击时的操作
        }
      },
    },
  };
</script>

<style lang="less" scoped>
  .auth_mess {
    margin-top: 240rpx;
  }

  .custom-tooltip {
    position: absolute;
    z-index: 9999;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 8px;
    padding: 12px;
    color: #fff;
    min-width: 150px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    pointer-events: none;
  }

  .tooltip-header {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 4px;
  }

  .tooltip-body {
    margin-bottom: 8px;
  }

  .tooltip-item {
    display: flex;
    align-items: center;
    margin: 4px 0;
    font-size: 14px;
  }

  .color-box {
    width: 12px;
    height: 12px;
    margin-right: 8px;
    border-radius: 2px;
  }

  .tooltip-footer {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 4px;
  }

  .custom-tooltip {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 12px;
    z-index: 9999;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    max-width: 200px;
  }

  .chart-pie {
    height: 90%;
  }

  .content {
    padding: 240rpx 20rpx 20rpx 20rpx;
  }

  .chart-box {
    min-height: 500rpx;
    background: #fff;
    position: relative;
    padding-bottom: 20rpx;
    border-radius: 16rpx 16rpx 16rpx 16rpx;

    .title {
      font-size: 30rpx;
      height: 84rpx;
      line-height: 46rpx;
      color: #000;
      padding: 20rpx;
      text-align: left;
      border-bottom: 2rpx solid #e6e6e6;
    }

    .chats-cont {
      width: 100%;
      min-height: 500rpx;

      .legend {
        text-align: center;
        position: relative;
        bottom: -16px;
        font-size: 30rpx;
        color: #333;

        view::before {
          content: "";
          /* 必须设置 content */
          display: inline-block;
          width: 8px;
          /* 圆点宽度 */
          height: 8px;
          /* 圆点高度 */
          border-radius: 50%;
          /* 圆形 */
          background-color: #d22c2c;
          /* 圆点颜色 */
          margin-right: 6px;
          /* 圆点与文字的间距 */
        }
      }
    }

    .chart-title {
      position: absolute;
      left: 50%;
      top: 56%;
      transform: translate(-50%, -50%);
      text-align: center;

      .center-label {
        .title {
          font-size: 26rpx;
          color: #666666;
          margin-bottom: 10rpx;
        }

        .value-1 {
          display: initial;
          padding: 0 50rpx;
          margin-top: 10rpx;
          width: auto;
          height: 40rpx;
          border-radius: 50rpx 50rpx 50rpx 50rpx;
          opacity: 1;
          border: 1px solid #536fc8;
          font-size: 30rpx;
          color: #536fc8;
        }

        .value-2 {
          display: initial;
          padding: 0 50rpx;
          width: auto;
          height: 64rpx;
          border-radius: 50rpx 50rpx 50rpx 50rpx;
          opacity: 1;
          border: 1px solid #f5c756;
          font-size: 30rpx;
          color: #f5c756;
        }

        .value-0 {
          display: initial;
          padding: 0 50rpx;
          width: auto;
          height: 40rpx;
          border-radius: 50rpx 50rpx 50rpx 50rpx;
          opacity: 1;
          border: 1px solid #96c96f;
          font-size: 30rpx;
          color: #96c96f;
        }
      }

      .top-20 {
        margin-top: 40rpx;
      }
    }
  }

  .column-chart {
    background: #ffffff;
    padding: 20rpx 20rpx 40rpx 20rpx;
    border-radius: 16rpx;
    width: 100%;
    margin-bottom: 20rpx;
  }
</style>